<template>
	<view class="firstlogin">
		<view class="back">
			<image :src="imgUrl" mode="aspectFit"></image>
			<view class="name-title">
				<p>Hi, {{name}}</p>
				<p>通过微信授权登录</p>
			</view>
		</view>
		<view class="header">
			<view class="item" @click="openshanghu">
				<text>商户类型</text>
				<view class="right">
					<text>{{shlxText}}</text>
					<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
					<image src="../../static/images/gengduo-b.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="item" @click="openhangye">
				<text>行业</text>
				<view class="right">
					<text>{{hylxText}}</text>
					<u-select v-model="hyShow" :list="hyList" @confirm="hyConfirm"></u-select>
					<image src="../../static/images/gengduo-b.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="item">
				<text>商户名称</text>
				<view class="right">
					<u-input class="u-input" v-model="value1" input-align="right" type="text" height="40"
						placeholder="请输入您的商户名称" />
				</view>
			</view>
			<view class="item">
				<text>执照编号</text>
				<view class="right">
					<u-input class="u-input" v-model="value2" input-align="right" type="text" height="40"
						placeholder="请输入您的工商执照编号" />
				</view>
			</view>
			<view class="item">
				<text>法人姓名</text>
				<view class="right">
					<u-input class="u-input" v-model="value3" input-align="right" type="text" height="40"
						placeholder="请输入法人姓名" />
				</view>
			</view>
			<view class="item">
				<text>联系电话</text>
				<view class="right">
					<u-input class="u-input" v-model="value4" input-align="right" type="number" height="40"
						placeholder="请输入联系电话" />
				</view>
			</view>
			<view class="dw-item">
				<text>经营地址</text>
				<view class="right" @click="getlocation">
					<text>获取当前定位</text>
					<image src="../../static/images/dinwei.png" mode="aspectFit"></image>
				</view>
			</view>
			<u-input class="u-input" v-model="value5" input-align="left" type="textarea" height="40"
				placeholder="请输入经营地址" />
		</view>
		<view class="footer">
			<p>身份证上传</p>
			<view class="sfzbox">
				<u-upload @on-success="cardfront" max-count="1" :action="action" :header="header" width="300" upload-text="法人身份证人相面"></u-upload>
				<u-upload @on-success="cardback" max-count="1" :action="action" :header="header" width="300" upload-text="法人身份证国徽面"></u-upload>
			</view>
			<view class="yyzz">
				<p>营业执照上传</p>
				<u-upload @on-success="businesslicenseimg" max-count="1" :action="action" :file-list="fileList" width="300" upload-text="点击上传营业执照"></u-upload>
			</view>
			<view class="yyzz">
				<p>行业资质上传</p>
				<u-upload @on-success="industryqualification" max-count="1" :action="action" :file-list="fileList" width="300" upload-text="点击上传行业资质"></u-upload>
			</view>
			<view class="mtz">
				<p>门头照/环境照上传</p>
				<view class="mtz-box">
					<u-upload @on-success="facadeimg" max-count="1" :action="action" :file-list="fileList" width="300" upload-text="点击上传门头照"></u-upload>
					<u-upload @on-success="environmentimgs" max-count="1" :action="action" :file-list="fileList" width="300" upload-text="点击上传环境照"></u-upload>
				</view>
			</view>
			<view class="tyfwxy">
				<u-checkbox-group class="u-checkbox-group">
					<u-checkbox class="u-checkbox" @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list2" :key="index">
					</u-checkbox>
					<text class="text-one">已阅读并同意此</text>
					<text @click="getUserServiceAgreement">服务协议</text>
				</u-checkbox-group>
			</view>
			<button :disabled="disabled" :class="state == 1 ? 'active' : 'noActive'" type="default" @click="goBusinesscenter">提交认证申请</button>
		</view>
		<u-modal v-model="show1" v-html="content" :content="content" :title="title" :content-style="{padding: '30rpx'}"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
	import {shareMixins} from '../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟商户端',
				    path: '/pages/mine/mine' // 分享的页面路径
				},
				name:'',//登录人员姓名
				imgUrl:'',//登录人员头像
				show: false,
				shlxText: '',
				shlxValue:'',
				list: [],
				hyShow: false,
				hylxText: '',
				hylxValue:'',
				hyList: [],
				value:'',
				value1: '',
				value2: '',
				value3: '',
				value4: '',
				value5: '',
				addressDetails:'',
				latOrlng:'',
				action: 'https://ca.wupin.shop/api/common/uploadImage',//上传测试地址
				cardFront:'',//身份证正面地址
				cardBack:'',//身份证反面地址
				businessLicenseImg:'',//营业执照
				facadeImg:'',//门头照
				industryQualification:'',//行业资质照
				environmentImgs:'',//环境照
				header:{
					'Content-Type':'application'
				},
				checked:false,//同意协议的复选框
				state:0,
				disabled:true,
				list2: [{
					name: '已阅读并同意此',
					checked: false,
					disabled: false
				}],
				show1: false,
				content:'',
				title:'',
				state:0
			}
		},
		onShow() {},
		onLoad() {
			var loginuserinfo = uni.getStorageSync('loginuserInfo')
			this.name = loginuserinfo.nickName
			this.imgUrl = loginuserinfo.avatarUrl
			this.getBusinessTypesData()//获取商户类型
			this.getIndustryTypesData()//获取行业类型
			this.getBusinessInfo()//审核失败后再次拉去上一次提交的信息
		},
		methods: {
			async getBusinessInfo(){//获取商户信息
				const res = await this.$myRequest({
					url:'/api/businessBasic/getBusinessInformationData'
				}).then((res) => {
					this.shlxText = res.data.data.company_types
					this.hylxText = res.data.data.industry
					if(res.data.data.company_types)
					this.value1 = res.data.data.company_name
					this.value2 = res.data.data.business_license_code
					this.value3= res.data.data.legal_person
					this.value4 = res.data.data.link_mobile
					this.value5 = res.data.data.address
				})
			},
			openshanghu() { //打开商户类型选择
				this.show = true
			},
			async getBusinessTypesData(){//获取商户类型
				const res = await this.$myRequest({
					url:'/api/businessBasic/getBusinessTypesData'
				}).then((res) => {
					this.list = res.data.data
					this.shlxText = this.list[0].label
					this.shlxValue = this.list[0].value
				})
			},
			confirm(e) { //确定商户类型
				this.shlxText = e[0].label
				this.shlxValue = e[0].value
			},
			openhangye() { //打开行业类型选择
				this.hyShow = true
			},
			async getIndustryTypesData(){//获取行业类型
				const res = await this.$myRequest({
					url:'/api/businessBasic/getIndustryTypesData'
				}).then((res) => {
					this.hyList = res.data.data
					this.hylxText = this.hyList[0].label
					this.hylxValue = this.hyList[0].value
				})
			},
			hyConfirm(e) { //确定行业类型
				this.hylxText = e[0].label
				this.hylxValue = e[0].value
			},
			changegou(res){//同意协议复选框状态改变时触发
				console.log(res.value)
				if(res.value){
					this.state = 1
					this.disabled = false
				}else{
					this.state = 0
					this.disabled = true
				}
			},
			getlocation(){//获取定位地址
				uni.getLocation({
					type: 'wgs84',
					success:(res)=> {
						let qqmapsdk = new QQMapWX({
							key: 'YEJBZ-J7ZKO-HLSWP-SVYG5-JLMMT-VZBSD'
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success:(res)=> {
								this.value5 = res.result.address
								this.addressDetails = res.result.address_component
								this.latOrlng = res.result.location
							},
						})
					}
				});
			},
			cardfront(e){//身份证正面照上传成功
				// console.log(e.data.url)
				this.cardFront = e.data.url
			},
			cardback(e){//身份证反面照上传成功
				this.cardBack = e.data.url
			},
			businesslicenseimg(e){//营业执照上传成功
				this.businessLicenseImg = e.data.url
			},
			facadeimg(e){//门头照上传成功
				this.facadeImg = e.data.url
			},
			industryqualification(e){//行业资质照上传成功
				this.industryQualification = e.data.url
			},
			environmentimgs(e){//环境照上传成功
				this.environmentImgs = e.data.url
			},
			async goBusinesscenter(){//提交认证成功 跳转商家中心
				var data = {
					company_name: this.value1,
					business_license_code: this.value2,
					company_types: this.shlxValue,
					industry: this.hylxValue,
					legal_person: this.value3,
					link_mobile: this.value4,
					province: this.addressDetails.province,
					city: this.addressDetails.city,
					area: this.addressDetails.district,
					street: this.addressDetails.street,
					address: this.value5,
					lat: this.latOrlng.lat,
					lng: this.latOrlng.lng,
					card_front: this.cardFront,//身份证正面照
					card_back: this.cardBack,//身份证反面照
					business_license_img: this.businessLicenseImg,//营业执照
					facade_img: this.facadeImg,//门头照
					industry_qualification: this.industryQualification,//行业资质照
					environment_imgs:this.environmentImgs,//环境照
				}
				const res = await this.$myRequest({
					url:'/api/businessBasic/updatedBusinessInformationData'+this.$u.queryParams(data),
					method:'POST'
				}).then((res) => {
					if(res.data.code === 200){
						uni.setStorageSync('businessData',data)
						this.$refs.uToast.show({
							title:res.data.msg,
							type:'success'
						})	
						setTimeout(() => {
							uni.switchTab({
								url:'../mine/mine'
							})
						},1000)
					}else if(res.data.code === 1008){
						this.$refs.uToast.show({
							title:res.data.msg,
							type:'error'
						})
					}else{ 
						this.$refs.uToast.show({
							title:'提交失败，请检查内容信息！',
							type:'error'
						})
					}
				})
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				// console.log(e);
				if(e.value === true){
					this.disabled = false
					this.state = 1
				}else{
					this.disabled = true
					this.state = 0
				}
			},
			async getUserServiceAgreement(){//获取服务协议
				const res = this.$myRequest({
					url:'/api/common/getUserServiceAgreement'
				}).then((res) => {
					this.show1 = true
					this.content = res.data.data.setting_content
					this.title = res.data.data.setting_key
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.firstlogin {
		.back {
			z-index: 1;
			display: flex;
			flex-wrap: wrap;
			background-image: url(../../static/images/backgroudimg.png);
			background-repeat: no-repeat;
			background-size: cover;
			width: 100%;
			height: 404rpx;

			image {
				width: 128rpx;
				height: 128rpx;
				margin: 96rpx 20rpx 180rpx 32rpx;
				border-radius: 50%;
			}

			.name-title {
				margin: 115rpx 20rpx 180rpx 0;

				p {
					color: #731400;
					font-size: 22rpx
				}

				p:nth-child(1) {
					color: #731400;
					font-size: 40rpx
				}
			}
		}

		.header {
			z-index: 99;
			margin-top: -100rpx;
			padding: 0 32rpx 18rpx 32rpx;
			background-color: #FFFFFF;
			border-radius: 42rpx;
			margin-bottom: 20rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 2rpx solid #DFDFDF;

				text {
					color: #333333;
					font-size: 32rpx;
				}

				.right {
					display: flex;
					align-items: center;

					image {
						width: 22rpx;
						height: 13rpx;
						margin-left: 20rpx;
					}

				}
			}

			.dw-item {
				padding: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.right {
					width: 200rpx;
					display: flex;
					align-items: center;
					text{
						font-size: 24rpx;
						color: #EC5F2F;
					}
					image {
						height: 26rpx;
						width: 20rpx;
						margin-left: 14rpx;
					}
				}
			}
		}

		.footer {
			padding: 40rpx 32rpx 160rpx 32rpx;
			background-color: #FFFFFF;

			p {
				font-size: 32rpx;
				color: #333333;
			}
			.sfzbox{
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;
			}
			.yyzz{
				margin-bottom: 48rpx;
				p{
					margin-top: 48rpx;
					margin-bottom: 28rpx;
				}
			}
			.mtz-box{
				display: flex;
				justify-content: space-between;
				// float: left;
				margin-top: 28rpx;
			}
			.tyfwxy{
				.u-checkbox-group{
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.u-checkbox{
						margin: 0;
						padding: 0;
					}
					text{
						font-size: 30rpx;
						color: #2B85E4;
					}
					.text-one{
						margin-left: -20rpx;
						margin-right: 10rpx;
						font-size: 30rpx;
						color: #333333;
					}
				}
				margin-top: 104rpx;
				margin-bottom: 22rpx;
			}
			.active{
				height: 100rpx;
				background: linear-gradient(#FFEED9,#FFE7CB,#FFDDB9);
				color: #731400;
				font-size: 36rpx;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: none;
			}
			.noActive{
				height: 100rpx;
				background: linear-gradient(#B2B2B2,#818181);
				color: #FFFFFF;
				font-size: 36rpx;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: none;
			}
		}
	}
</style>
